/* 参考ant-design里的颜色，它的颜色挺全的，我很喜欢。每个颜色都由浅到深 */
:root {
    --red-1: #fff1f0;
    --red-2: #ffccc7;
    --red-3: #ffa39e;
    --red-4: #ff7875;
    --red-5: #ff4d4f;
    --red-6: #f5222d;
    --red-7: #cf1322;
    --red-8: #a8071a;
    --red-9: #820014;
    --red-10: #5c0011;
    --volcano-1: #fff2e8;
    --volcano-2: #ffd8bf;
    --volcano-3: #ffbb96;
    --volcano-4: #ff9c6e;
    --volcano-5: #ff7a45;
    --volcano-6: #fa541c;
    --volcano-7: #d4380d;
    --volcano-8: #ad2102;
    --volcano-9: #871400;
    --volcano-10: #610b00;
    --orange-1: #fff7e6;
    --orange-2: #ffe7ba;
    --orange-3: #ffd591;
    --orange-4: #ffc069;
    --orange-5: #ffa940;
    --orange-6: #fa8c16;
    --orange-7: #d46b08;
    --orange-8: #ad4e00;
    --orange-9: #873800;
    --orange-10: #612500;
    --gold-1: #fffbe6;
    --gold-2: #fff1b8;
    --gold-3: #ffe58f;
    --gold-4: #ffd666;
    --gold-5: #ffc53d;
    --gold-6: #faad14;
    --gold-7: #d48806;
    --gold-8: #ad6800;
    --gold-9: #874d00;
    --gold-10: #613400;
    --yellow-1: #feffe6;
    --yellow-2: #ffffb8;
    --yellow-3: #fffb8f;
    --yellow-4: #fff566;
    --yellow-5: #ffec3d;
    --yellow-6: #fadb14;
    --yellow-7: #d4b106;
    --yellow-8: #ad8b00;
    --yellow-9: #876800;
    --yellow-10: #614700;
    --lime-1: #fcffe6;
    --lime-2: #f4ffb8;
    --lime-3: #eaff8f;
    --lime-4: #d3f261;
    --lime-5: #bae637;
    --lime-6: #a0d911;
    --lime-7: #7cb305;
    --lime-8: #5b8c00;
    --lime-9: #3f6600;
    --lime-10: #254000;
    --green-1: #f6ffed;
    --green-2: #d9f7be;
    --green-3: #b7eb8f;
    --green-4: #95de64;
    --green-5: #73d13d;
    --green-6: #52c41a;
    --green-7: #389e0d;
    --green-8: #237804;
    --green-9: #135200;
    --green-10: #092b00;
    --cyan-1: #e6fffb;
    --cyan-2: #b5f5ec;
    --cyan-3: #87e8de;
    --cyan-4: #5cdbd3;
    --cyan-5: #36cfc9;
    --cyan-6: #13c2c2;
    --cyan-7: #08979c;
    --cyan-8: #006d75;
    --cyan-9: #00474f;
    --cyan-10: #002329;
    --blue-1: #e6f7ff;
    --blue-2: #bae7ff;
    --blue-3: #91d5ff;
    --blue-4: #69c0ff;
    --blue-5: #40a9ff;
    --blue-6: #1890ff;
    --blue-7: #096dd9;
    --blue-8: #0050b3;
    --blue-9: #003a8c;
    --blue-10: #002766;
    --geekblue-1: #f0f5ff;
    --geekblue-2: #d6e4ff;
    --geekblue-3: #adc6ff;
    --geekblue-4: #85a5ff;
    --geekblue-5: #597ef7;
    --geekblue-6: #2f54eb;
    --geekblue-7: #1d39c4;
    --geekblue-8: #10239e;
    --geekblue-9: #061178;
    --geekblue-10: #030852;
    --purple-1: #f9f0ff;
    --purple-2: #efdbff;
    --purple-3: #d3adf7;
    --purple-4: #b37feb;
    --purple-5: #9254de;
    --purple-6: #722ed1;
    --purple-7: #531dab;
    --purple-8: #391085;
    --purple-9: #22075e;
    --purple-10: #120338;
    --magenta-1: #fff0f6;
    --magenta-2: #ffd6e7;
    --magenta-3: #ffadd2;
    --magenta-4: #ff85c0;
    --magenta-5: #f759ab;
    --magenta-6: #eb2f96;
    --magenta-7: #c41d7f;
    --magenta-8: #9e1068;
    --magenta-9: #780650;
    --magenta-10: #520339;
    --gray-1: #ffffff;
    --gray-2: #fafafa;
    --gray-3: #f5f5f5;
    --gray-4: #f0f0f0;
    --gray-5: #d9d9d9;
    --gray-6: #bfbfbf;
    --gray-7: #8c8c8c;
    --gray-8: #595959;
    --gray-9: #434343;
    --gray-10: #262626;
    --gray-11: #1f1f1f;
    --gray-12: #141414;
    --gray-13: #000000;
}

/*
  flex布局超集,使用flex布局必用。
  默认行式布局，元素垂直居中。
  该类写在最左边，右边的类中同名属性会将它覆盖掉。
*/
.flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 列式弹性盒子 */
.flex-col {
    flex-direction: column;
}

/* 换行 */
.flex-wrap {
    flex-wrap: wrap;
}

/* 不换行 */
.flex-nowrap {
    flex-wrap: nowrap;
}

/* flex-item-*, 子元素对齐方式 ↓ */
/* 列式布局垂直居中 */
.flex-col-center {
    align-items: center;
}

/* 列式布局顶部对齐 */
.flex-col-top {
    align-items: flex-start;
}

/* 列式布局底部对齐 */
.flex-col-bottom {
    align-items: flex-end;
}

/* 行式布局左边对齐 */
.flex-row-left {
    justify-content: flex-start;
}

/* 行式布局水平居中 */
.flex-row-center {
    justify-content: center;
}

/* 行式布局右边对齐 */
.flex-row-right {
    justify-content: flex-end;
}

/* 行式布局水平两端对齐，项目之间的间隔都相等 */
.flex-row-between {
    justify-content: space-between;
}

/* 行式布局，水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 */
.flex-row-around {
    justify-content: space-around;
}

/*
  ↓ 以下写在子元素class中，表示子元素占据空间大小
*/
.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

.flex-6 {
    flex: 6;
}

.flex-7 {
    flex: 7;
}

.flex-8 {
    flex: 8;
}

.flex-9 {
    flex: 9;
}

/*文字相关*/
/*八号*/
.txt8 {
    font-size: 6px;
}

/*七号*/
.txt7 {
    font-size: 7px;
}

/*小六*/
.txt6 {
    font-size: 8px;
}

/*六号*/
.txt6x {
    font-size: 10px;
}

/*小五*/
.txt5 {
    font-size: 12px;
}

/*五号*/
.txt5x {
    font-size: 14px;
}

/*小四*/
.txt4 {
    font-size: 16px;
}

/*四号*/
.txt4x {
    font-size: 19px;
}

/*小三*/
.txt3 {
    font-size: 21px;
}

/*三号*/
.txt3x {
    font-size: 22px;
}

/*小二*/
.txt2 {
    font-size: 24px;
}

/*二号*/
.txt2x {
    font-size: 29px;
}

/*小一*/
.txt1 {
    font-size: 32px;
}

/*一号*/
.txt1x {
    font-size: 35px;
}

/*小初*/
.txt0 {
    font-size: 48px;
}

/*初号*/
.txt0x {
    font-size: 56px;
}

/*em为单位*/
.txt-0_5em {
    font-size: 0.5em;
}

.txt-0_6em {
    font-size: 0.6em;
}

.txt-0_7em {
    font-size: 0.7em;
}

.txt-0_8em {
    font-size: 0.8em;
}

.txt-0_9em {
    font-size: 0.9em;
}

.txt-1_1em {
    font-size: 1.1em;
}

.txt-1_2em {
    font-size: 1.2em;
}

.txt-1_3em {
    font-size: 1.3em;
}

.txt-1_4em {
    font-size: 1.4em;
}

.txt-1_5em {
    font-size: 1.5em;
}

/*加粗*/
.bold {
    font-weight: bold;
}

/*居中*/
.txt-center {
    text-align: center;
}

/*文字颜色 数字越来越大代表颜色越来越深*/
.txt-red-1 {
    color: var(--red-1);
}

.txt-red-2 {
    color: var(--red-2);
}

.txt-red-3 {
    color: var(--red-3);
}

.txt-red-4 {
    color: var(--red-4);
}

.txt-red-5 {
    color: var(--red-5);
}

.txt-red-6 {
    color: var(--red-6);
}

.txt-red-7 {
    color: var(--red-7);
}

.txt-red-8 {
    color: var(--red-8);
}

.txt-red-9 {
    color: var(--red-9);
}

.txt-red-10 {
    color: var(--red-10);
}

.txt-volcano-1 {
    color: var(--volcano-1);
}

.txt-volcano-2 {
    color: var(--volcano-2);
}

.txt-volcano-3 {
    color: var(--volcano-3);
}

.txt-volcano-4 {
    color: var(--volcano-4);
}

.txt-volcano-5 {
    color: var(--volcano-5);
}

.txt-volcano-6 {
    color: var(--volcano-6);
}

.txt-volcano-7 {
    color: var(--volcano-7);
}

.txt-volcano-8 {
    color: var(--volcano-8);
}

.txt-volcano-9 {
    color: var(--volcano-9);
}

.txt-volcano-10 {
    color: var(--volcano-10);
}

.txt-orange-1 {
    color: var(--orange-1);
}

.txt-orange-2 {
    color: var(--orange-2);
}

.txt-orange-3 {
    color: var(--orange-3);
}

.txt-orange-4 {
    color: var(--orange-4);
}

.txt-orange-5 {
    color: var(--orange-5);
}

.txt-orange-6 {
    color: var(--orange-6);
}

.txt-orange-7 {
    color: var(--orange-7);
}

.txt-orange-8 {
    color: var(--orange-8);
}

.txt-orange-9 {
    color: var(--orange-9);
}

.txt-orange-10 {
    color: var(--orange-10);
}

.txt-gold-1 {
    color: var(--gold-1);
}

.txt-gold-2 {
    color: var(--gold-2);
}

.txt-gold-3 {
    color: var(--gold-3);
}

.txt-gold-4 {
    color: var(--gold-4);
}

.txt-gold-5 {
    color: var(--gold-5);
}

.txt-gold-6 {
    color: var(--gold-6);
}

.txt-gold-7 {
    color: var(--gold-7);
}

.txt-gold-8 {
    color: var(--gold-8);
}

.txt-gold-9 {
    color: var(--gold-9);
}

.txt-gold-10 {
    color: var(--gold-10);
}

.txt-yellow-1 {
    color: var(--yellow-1);
}

.txt-yellow-2 {
    color: var(--yellow-2);
}

.txt-yellow-3 {
    color: var(--yellow-3);
}

.txt-yellow-4 {
    color: var(--yellow-4);
}

.txt-yellow-5 {
    color: var(--yellow-5);
}

.txt-yellow-6 {
    color: var(--yellow-6);
}

.txt-yellow-7 {
    color: var(--yellow-7);
}

.txt-yellow-8 {
    color: var(--yellow-8);
}

.txt-yellow-9 {
    color: var(--yellow-9);
}

.txt-yellow-10 {
    color: var(--yellow-10);
}

.txt-lime-1 {
    color: var(--lime-1);
}

.txt-lime-2 {
    color: var(--lime-2);
}

.txt-lime-3 {
    color: var(--lime-3);
}

.txt-lime-4 {
    color: var(--lime-4);
}

.txt-lime-5 {
    color: var(--lime-5);
}

.txt-lime-6 {
    color: var(--lime-6);
}

.txt-lime-7 {
    color: var(--lime-7);
}

.txt-lime-8 {
    color: var(--lime-8);
}

.txt-lime-9 {
    color: var(--lime-9);
}

.txt-lime-10 {
    color: var(--lime-10);
}

.txt-green-1 {
    color: var(--green-1);
}

.txt-green-2 {
    color: var(--green-2);
}

.txt-green-3 {
    color: var(--green-3);
}

.txt-green-4 {
    color: var(--green-4);
}

.txt-green-5 {
    color: var(--green-5);
}

.txt-green-6 {
    color: var(--green-6);
}

.txt-green-7 {
    color: var(--green-7);
}

.txt-green-8 {
    color: var(--green-8);
}

.txt-green-9 {
    color: var(--green-9);
}

.txt-green-10 {
    color: var(--green-10);
}

.txt-cyan-1 {
    color: var(--cyan-1);
}

.txt-cyan-2 {
    color: var(--cyan-2);
}

.txt-cyan-3 {
    color: var(--cyan-3);
}

.txt-cyan-4 {
    color: var(--cyan-4);
}

.txt-cyan-5 {
    color: var(--cyan-5);
}

.txt-cyan-6 {
    color: var(--cyan-6);
}

.txt-cyan-7 {
    color: var(--cyan-7);
}

.txt-cyan-8 {
    color: var(--cyan-8);
}

.txt-cyan-9 {
    color: var(--cyan-9);
}

.txt-cyan-10 {
    color: var(--cyan-10);
}

.txt-blue-1 {
    color: var(--blue-1);
}

.txt-blue-2 {
    color: var(--blue-2);
}

.txt-blue-3 {
    color: var(--blue-3);
}

.txt-blue-4 {
    color: var(--blue-4);
}

.txt-blue-5 {
    color: var(--blue-5);
}

.txt-blue-6 {
    color: var(--blue-6);
}

.txt-blue-7 {
    color: var(--blue-7);
}

.txt-blue-8 {
    color: var(--blue-8);
}

.txt-blue-9 {
    color: var(--blue-9);
}

.txt-blue-10 {
    color: var(--blue-10);
}

.txt-geekblue-1 {
    color: var(--geekblue-1);
}

.txt-geekblue-2 {
    color: var(--geekblue-2);
}

.txt-geekblue-3 {
    color: var(--geekblue-3);
}

.txt-geekblue-4 {
    color: var(--geekblue-4);
}

.txt-geekblue-5 {
    color: var(--geekblue-5);
}

.txt-geekblue-6 {
    color: var(--geekblue-6);
}

.txt-geekblue-7 {
    color: var(--geekblue-7);
}

.txt-geekblue-8 {
    color: var(--geekblue-8);
}

.txt-geekblue-9 {
    color: var(--geekblue-9);
}

.txt-geekblue-10 {
    color: var(--geekblue-10);
}

.txt-purple-1 {
    color: var(--purple-1);
}

.txt-purple-2 {
    color: var(--purple-2);
}

.txt-purple-3 {
    color: var(--purple-3);
}

.txt-purple-4 {
    color: var(--purple-4);
}

.txt-purple-5 {
    color: var(--purple-5);
}

.txt-purple-6 {
    color: var(--purple-6);
}

.txt-purple-7 {
    color: var(--purple-7);
}

.txt-purple-8 {
    color: var(--purple-8);
}

.txt-purple-9 {
    color: var(--purple-9);
}

.txt-purple-10 {
    color: var(--purple-10);
}

.txt-magenta-1 {
    color: var(--magenta-1);
}

.txt-magenta-2 {
    color: var(--magenta-2);
}

.txt-magenta-3 {
    color: var(--magenta-3);
}

.txt-magenta-4 {
    color: var(--magenta-4);
}

.txt-magenta-5 {
    color: var(--magenta-5);
}

.txt-magenta-6 {
    color: var(--magenta-6);
}

.txt-magenta-7 {
    color: var(--magenta-7);
}

.txt-magenta-8 {
    color: var(--magenta-8);
}

.txt-magenta-9 {
    color: var(--magenta-9);
}

.txt-magenta-10 {
    color: var(--magenta-10);
}

.txt-gray-1 {
    color: var(--gray-1);
}

.txt-gray-2 {
    color: var(--gray-2);
}

.txt-gray-3 {
    color: var(--gray-3);
}

.txt-gray-4 {
    color: var(--gray-4);
}

.txt-gray-5 {
    color: var(--gray-5);
}

.txt-gray-6 {
    color: var(--gray-6);
}

.txt-gray-7 {
    color: var(--gray-7);
}

.txt-gray-8 {
    color: var(--gray-8);
}

.txt-gray-9 {
    color: var(--gray-9);
}

.txt-gray-10 {
    color: var(--gray-10);
}

.txt-gray-11 {
    color: var(--gray-11);
}

.txt-gray-12 {
    color: var(--gray-12);
}

.txt-gray-13 {
    color: var(--gray-13);
}

/*
pp表示百分数，我比较常用百分号和em为单位
*/
.w-10pp {
    width: 10%;
}
.w-20pp {
    width: 20%;
}
.w-30pp {
    width: 30%;
}
.w-40pp {
    width: 40%;
}
.w-50pp {
    width: 50%;
}
.w-60pp {
    width: 60%;
}
.w-70pp {
    width: 70%;
}
.w-80pp {
    width: 80%;
}
.w-90pp {
    width: 90%;
}
.w-100pp {
    width: 100%;
}
.w-5pp {
    width: 5%;
}
.w-15pp {
    width: 15%;
}
.w-25pp {
    width: 25%;
}
.w-35pp {
    width: 35%;
}
.w-45pp {
    width: 45%;
}
.w-55pp {
    width: 55%;
}
.w-65pp {
    width: 65%;
}
.w-75pp {
    width: 75%;
}
.w-85pp {
    width: 85%;
}
.w-95pp {
    width: 95%;
}
.w-1em {
    width: 1em;
}
.w-2em {
    width: 2em;
}
.w-3em {
    width: 3em;
}
.w-4em {
    width: 4em;
}
.w-5em {
    width: 5em;
}
.w-6em {
    width: 6em;
}
.w-7em {
    width: 7em;
}
.w-8em {
    width: 8em;
}
.w-9em {
    width: 9em;
}
.w-10em {
    width: 10em;
}
.w-11em {
    width: 11em;
}
.w-12em {
    width: 12em;
}
.w-13em {
    width: 13em;
}
.w-14em {
    width: 14em;
}
.w-15em {
    width: 15em;
}
.w-16em {
    width: 16em;
}
/*
pp表示百分数，height用的倒是比较少，没有width用的多
*/
.h-10pp {
    height: 10%;
}
.h-20pp {
    height: 20%;
}
.h-30pp {
    height: 30%;
}
.h-40pp {
    height: 40%;
}
.h-50pp {
    height: 50%;
}
.h-60pp {
    height: 60%;
}
.h-70pp {
    height: 70%;
}
.h-80pp {
    height: 80%;
}
.h-90pp {
    height: 90%;
}
.h-100pp {
    height: 100%;
}
.h-5pp {
    height: 5%;
}
.h-15pp {
    height: 15%;
}
.h-25pp {
    height: 25%;
}
.h-35pp {
    height: 35%;
}
.h-45pp {
    height: 45%;
}
.h-55pp {
    height: 55%;
}
.h-65pp {
    height: 65%;
}
.h-75pp {
    height: 75%;
}
.h-85pp {
    height: 85%;
}
.h-95pp {
    height: 95%;
}
/* 外边距我基本也不怎么用px，调起来着实麻烦，还是em好，1em表示一个字体的长度 */
.mg-1em {
    margin: 1em 1em;
}
.mr-1em {
    margin-right: 1em;
}
.mb-1em {
    margin-bottom: 1em;
}
.ml-1em {
    margin-left: 1em;
}
.mt-1em {
    margin-top: 1em;
}
.mg-2em {
    margin: 2em 2em;
}
.mr-2em {
    margin-right: 2em;
}
.mb-2em {
    margin-bottom: 2em;
}
.ml-2em {
    margin-left: 2em;
}
.mt-2em {
    margin-top: 2em;
}
.mg-3em {
    margin: 3em 3em;
}
.mr-3em {
    margin-right: 3em;
}
.mb-3em {
    margin-bottom: 3em;
}
.ml-3em {
    margin-left: 3em;
}
.mt-3em {
    margin-top: 3em;
}
.mg-4em {
    margin: 4em 4em;
}
.mr-4em {
    margin-right: 4em;
}
.mb-4em {
    margin-bottom: 4em;
}
.ml-4em {
    margin-left: 4em;
}
.mt-4em {
    margin-top: 4em;
}
.mg-5em {
    margin: 5em 5em;
}
.mr-5em {
    margin-right: 5em;
}
.mb-5em {
    margin-bottom: 5em;
}
.ml-5em {
    margin-left: 5em;
}
.mt-5em {
    margin-top: 5em;
}
.mg-6em {
    margin: 6em 6em;
}
.mr-6em {
    margin-right: 6em;
}
.mb-6em {
    margin-bottom: 6em;
}
.ml-6em {
    margin-left: 6em;
}
.mt-6em {
    margin-top: 6em;
}
.mg-7em {
    margin: 7em 7em;
}
.mr-7em {
    margin-right: 7em;
}
.mb-7em {
    margin-bottom: 7em;
}
.ml-7em {
    margin-left: 7em;
}
.mt-7em {
    margin-top: 7em;
}
.mg-8em {
    margin: 8em 8em;
}
.mr-8em {
    margin-right: 8em;
}
.mb-8em {
    margin-bottom: 8em;
}
.ml-8em {
    margin-left: 8em;
}
.mt-8em {
    margin-top: 8em;
}
.mg-9em {
    margin: 9em 9em;
}
.mr-9em {
    margin-right: 9em;
}
.mb-9em {
    margin-bottom: 9em;
}
.ml-9em {
    margin-left: 9em;
}
.mt-9em {
    margin-top: 9em;
}
.mg-10em {
    margin: 10em 10em;
}
.mr-10em {
    margin-right: 10em;
}
.mb-10em {
    margin-bottom: 10em;
}
.ml-10em {
    margin-left: 10em;
}
.mt-10em {
    margin-top: 10em;
}
/* 内边距我基本也不怎么用em，调起来着实麻烦，还是em好，1em表示一个字体的长度 */
.pd-1em {
    padding: 1em 1em;
}
.pr-1em {
    padding-right: 1em;
}
.pb-1em {
    padding-bottom: 1em;
}
.pl-1em {
    padding-left: 1em;
}
.pt-1em {
    padding-top: 1em;
}
.pd-2-2em {
    padding: 2em 2em;
}
.pr-2em {
    padding-right: 2em;
}
.pb-2em {
    padding-bottom: 2em;
}
.pl-2em {
    padding-left: 2em;
}
.pt-2em {
    padding-top: 2em;
}
.pd-3em {
    padding: 3em 3em;
}
.pr-3em {
    padding-right: 3em;
}
.pb-3em {
    padding-bottom: 3em;
}
.pl-3em {
    padding-left: 3em;
}
.pt-3em {
    padding-top: 3em;
}
.pd-4em {
    padding: 4em 4em;
}
.pr-4em {
    padding-right: 4em;
}
.pb-4em {
    padding-bottom: 4em;
}
.pl-4em {
    padding-left: 4em;
}
.pt-4em {
    padding-top: 4em;
}
.pd-5em {
    padding: 5em 5em;
}
.pr-5em {
    padding-right: 5em;
}
.pb-5em {
    padding-bottom: 5em;
}
.pl-5em {
    padding-left: 5em;
}
.pt-5em {
    padding-top: 5em;
}

/* 边框，一般常用全边框和底部边框，最常用的就是黑色，灰色，偶尔用用白色 */
.border-black{
    border: 1px solid black;
}
.border-white{
    border: 1px solid white;
}

.border-gray4{
    border: 1px solid var(--gray-4);
}

.border-gray5{
    border: 1px solid var(--gray-5);
}

.border-gray6{
    border: 1px solid var(--gray-6);
}

.border-gray7{
    border: 1px solid var(--gray-7);
}

.bbottom-black{
    border-bottom: 1px solid black;
}
.bbottom-white{
    border-bottom: 1px solid white;
}

.bbottom-gray4{
    border-bottom: 1px solid var(--gray-4);
}

.bbottom-gray5{
    border-bottom: 1px solid var(--gray-5);
}

.bbottom-gray6{
    border-bottom: 1px solid var(--gray-6);
}

.bbottom-gray7{
    border-bottom: 1px solid var(--gray-7);
}
/* 圆角也常用，经过实验百分号不行，还是得用px单位 */
.bradius-4px{
    border-radius: 4px;
}
.bradius-6px{
    border-radius: 6px;
}
.bradius-8px{
    border-radius: 8px;
}
.bradius-10px{
    border-radius: 10px;
}
.bradius-12px{
    border-radius: 12px;
}
.bradius-14px{
    border-radius: 14px;
}
.bradius-16px{
    border-radius: 16px;
}
.bradius-18px{
    border-radius: 18px;
}
.bradius-20px{
    border-radius: 20px;
}
/*圆形*/
.bradius-50pp{
    border-radius: 50%;
}
/*圆形*/
.bradius-50pp{
    border-radius: 50%;
}

/* 阴影 */
.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) ;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) ;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) ;
}